<template>
    <div>
        <el-dialog :title="formData.id?'修改信息':' 新增房产'" :visible="showDialog" @close="closeFn">
            <el-form ref="form" :model="formData" :rules="rules" label-width="80px">
                <el-form-item label="经纪" prop="agent">
                    <el-select v-model="formData.agent" placeholder="请选择">
                        <el-option v-for="item in agentList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="分类" prop="category">
                    <el-select v-model="formData.category" placeholder="请选择">
                        <el-option v-for="item in categoryList" :key="item.id" :label="item.title" :value="item.id">
                        </el-option></el-select>
                </el-form-item>
                <el-form-item label="标题" prop="title">
                    <el-input v-model="formData.title"></el-input>
                </el-form-item>
                <el-form-item label="标签" prop="tags">
                    <!-- <el-tag v-model="formData.tags"></el-tag> -->
                    <el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false"
                        @close="handleClose(tag)">
                        {{ tag }}
                    </el-tag>
                    <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput"
                        size="small" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
                    </el-input>
                    <el-button v-else class="button-new-tag" size="small" @click="showInput">+新增标签</el-button>
                </el-form-item>
                <el-form-item label="地址" prop="address">
                    <el-input v-model="formData.address"></el-input>
                </el-form-item>
                <el-form-item label="价格" prop="price">
                    <el-input v-model="formData.price"></el-input>
                </el-form-item>
                <el-form-item label="描述" prop="desc">
                    <el-input type="textarea" :rows="3" resize="none" placeholder="请输入内容"
                        v-model="formData.desc"></el-input>
                </el-form-item>
                <el-form-item label="内容" prop="content">
                    <el-input v-model="formData.content"></el-input>
                </el-form-item>
                <!-- 多个图片 -->
                <el-form-item label="介绍图片" prop="photos">
                    <!-- <el-input v-model="formData.image"></el-input> -->
                    <el-upload action="#" list-type="picture-card" ref="upload" :auto-upload="false" :file-list="formData.photos" 
                    :on-change="mutPic"
                    >
                        <i slot="default" class="el-icon-plus"></i>
                        <div slot="file" slot-scope="{file}">
                            <img v-imgError="defaultUrl" class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                            <span class="el-upload-list__item-actions">
                                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                                    <i class="el-icon-delete"></i>
                                </span>
                            </span>
                        </div>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                </el-form-item>

                <!-- 封面 单图 -->
                <el-form-item label="封面" prop="image">
                    <el-upload class="avatar-uploader" action="#" :show-file-list="false" 
                    :http-request="photoSuccess">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="closeFn">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { getAgentsList } from '@/api/customer'
import { getCategoryList, addEstate, getEstateInfo, editEstateInfo } from '@/api/estate'
import defaultUrl from '@/assets/common/bigUserHeader.png'
export default {
    props: {
        showDialog: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            defaultUrl,
            formData: {
                title: "", //标题
                desc: "", //描述
                image: "", //图片
                agent: null, //属于哪个经纪的 id 值
                content: "", //内容
                address: "", //地址
                price: "", //价格
                photos: [], //图片, url 组成数组
                tags: [], //标签, 字符串组成数组
                category: null //属于哪个分类 id 值
            },
            agentList: [],
            categoryList: [],
            // 标签
            dynamicTags: [],
            inputVisible: false,
            inputValue: '',
            // 图片
            imageUrl: '',
            // 多选图片
            dialogImageUrl: '',
            dialogVisible: false,
            disabled: false,
            rules: {
                title: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                ],
                desc: [
                    { required: true, message: '请输入描述', trigger: 'blur' },
                ],
                image: [
                    { required: true, message: '请输入图片', trigger: 'blur' },
                ],
                agent: [
                    { required: true, message: '请选择经纪人', trigger: 'blur' },
                ],
                content: [
                    { required: true, message: '请输入内容', trigger: 'blur' },
                ],
                address: [
                    { required: true, message: '请输入地址', trigger: 'blur' },
                ],
                price: [
                    { required: true, message: '请输入价格', trigger: 'blur' },
                ],
                photos: [
                    { required: true, message: '请输入图片', trigger: 'blur' },
                ],
                tags: [
                    { required: true, message: '请输入标签', trigger: 'blur' },
                ],
                category: [
                    { required: true, message: '请输入分类', trigger: 'blur' },
                ],


            },
        }
    },
    methods: {
        async getAgentsList() {
            //获取经纪人列表
            const res = await getAgentsList()
            this.agentList = res.data
            // console.log(87, res)
            // 获取分类列表
            const result = await getCategoryList({
                _limit: 2,
                _start: 0
            })
            // console.log(88, result)
            this.categoryList = result.data
        },
        // 提交
        submit() {
            this.$refs.form.validate(async (valid) => {
                console.log(this.formData.photos)
                console.log( this.$refs.upload)
                if (valid) {
                    if (this.formData.id) { //判断是否存在id如果是修改
                        await editEstateInfo(this.formData)
                    }
                    else {
                        await addEstate(this.formData)
                    }
                    this.$emit('updateList')
                    this.$emit('updataNum')
                    this.closeFn()
                } else {
                    console.log('提交失败');
                    return false;
                }
            });
        },
        closeFn() { //关闭弹窗
            this.$emit('update:showDialog', false)
            this.formData = {
                title: "", //标题
                desc: "", //描述
                image: "", //图片
                agent: null, //属于哪个经纪的 id 值
                content: "", //内容
                address: "", //地址
                price: "", //价格
                photos: [], //图片, url 组成数组
                tags: [], //标签, 字符串组成数组
                category: null //属于哪个分类 id 值
            }
            this.$refs.form.resetFields();
            this.dynamicTags = []//标签清空
            this.imageUrl = '' //图片清空
            this.$refs.upload.uploadFiles = [] //清空多图片
        },
        // 获取单个资产信息
        async getEstateInfo(id) {
            const res = await getEstateInfo(id) //请求指定id资产信息
            this.getAgentsList()
            // console.log(res)
            this.formData = res.data
            this.dynamicTags = this.formData.tags
            this.imageUrl = this.formData.image //图片回显
            this.$refs.upload.uploadFiles = this.formData.photos //图片群回显
            this.formData.agent = res.data.agent.id //经纪ID回显
            this.formData.category = res.data.category.id //分类id回显
        },


        // 便签方法
        handleClose(tag) {
            this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
        },

        showInput() {
            this.inputVisible = true;
            this.$nextTick(_ => {
                this.$refs.saveTagInput.$refs.input.focus();

            });
        },

        handleInputConfirm() { //tag标签生成触发函数
            let inputValue = this.inputValue;
            if (this.formData.tags.includes(inputValue)) {
                return
            }
            if (inputValue) {
                this.dynamicTags.push(inputValue);
            }
            this.inputVisible = false;
            this.inputValue = '';
            this.formData.tags = this.dynamicTags //保存数据
            // console.log(this.formData.tags)
        },
        // 相片改变方法
        photoSuccess() {
            this.imageUrl = 'https://tupian.qqw21.com/article/UploadPic/2020-1/20201122246510666.jpg'
            this.formData.image = 'https://tupian.qqw21.com/article/UploadPic/2020-1/20201122246510666.jpg'
        },
        // 多选图片方法
        handleRemove(file) { //移除选中图片
            // 这个是this.$refs.upload.uploadFiles是当前展示的数组，
            // 直接赋值给formData.photos，提交的时候会就带上这些参数
            this.$refs.upload.handleRemove(file) //删除视觉图片的方法
            this.formData.photos=this.$refs.upload.uploadFiles 
            // console.log(this.formData.photos)
        },
        mutPic(data) {//添加多个图片
            // console.log(data)
            // 这个是this.$refs.upload.uploadFiles是当前展示的数组，
            // 直接赋值给formData.photos，提交的时候会就带上这些参数
            this.formData.photos=this.$refs.upload.uploadFiles

        }

    }


}
</script>
<style scoped>
.el-tag+.el-tag {
    margin-left: 10px;
}

.button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
}

.input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
}

/* 图片样式 */
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    border: 1px dashed #ddd;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>